<template>
  <div class="showQuestion">

    <!-- 用卡片展示题目 -->
    <div  class="questionsBody" id="questionsBodyRef" ></div>    
      <div v-for="item in state.questionList" :key="item.id">
        <el-card class="box-card">
            <template #header>
                <div class="card-header">
                  <span>知识点:
                      <block v-for="(item_knowledge,index) in item.knowledgepoint" :key="index">
                        {{ item_knowledge.name }};
                      </block>                      
                  </span>
                    <span>题型：{{item.type_cn}}</span>
                    <!-- <el-row>
                      <span>难度
                        <el-rate v-model="item.difficulty_level" disabled size="small" :texts="['入门', '容易', '较难', '很难', '压轴']"/>
                      </span>
                    </el-row> -->
                    <span>创建者：{{ item.owner_info.nickname }}</span>
                    <span>日期：{{ item.publish_time }}</span>
                    <span>来源：{{ item.reference }}</span>
                    <span>{{ item.bank_point }}库币</span>
                    <div class="operateButton">                                
                      <el-tooltip class="box-item" effect="dark" content="查看详情" placement="top">
                        <el-button :icon="View" size="small" @click="viewDetail(item)" ></el-button>
                      </el-tooltip>                     
                     
                    </div>
                  </div>
          </template> 
          <div class="card_content">
              <div v-html="item.content" class="line-break"></div>
          </div>
        </el-card>
      </div>
  </div>
  
  <ViewQuestionDetail ref="viewQuestionDetail" :question="state.question"></ViewQuestionDetail>
</template>

<script setup>
  import { reactive, ref, onMounted, onUnmounted, computed, getCurrentInstance } from 'vue'
  import axios from '@/utils/axios'
  import { useRoute, useRouter } from 'vue-router'
  import ViewQuestionDetail from '@/views/ViewQuestionDetail.vue'
  import { View, Plus, Promotion, QuestionFilled, EditPen,  Star, StarFilled } from '@element-plus/icons-vue'
  import { ElMessage } from 'element-plus'
  import { useStore } from 'vuex'
  import { localGet, uploadPaperFileServer, deepClone } from '@/utils'
  // 通过结构，获得appContext变量
  const { appContext } = getCurrentInstance()
  // 获得全局上下文后， 得到$bus事件总线
  const eventBus = appContext.config.globalProperties.$bus
  // （发布）触发本注册的事件:即清空tree组件选中复选框状态

  const store=useStore()
  const viewQuestionDetail = ref()
	const select_order_number = ref('') //表格select选中的条数
  const select_orderId = ref([]) //表格select复选框选中的id
  const multipleSelection = ref([])
  const route = useRoute()
  const router = useRouter()
  // 变量
  const state = reactive({
    questionList: [], // 数据列表   
    question: null,
    question_detail: Object,  
  })
  // 初始化
  onMounted(()=>{
    getAllQuestions()
  })
  // 回到页面顶部
  const scrollToTop=()=>{
    document.querySelector('#questionsBodyRef').scrollIntoView(true);
  }
  // 获取章节目录搜索到所有题目
  const getAllQuestions=()=>{  
    axios.get("/questions/no_auth/").then(res => {
      // console.log("获取首页数据结果为：",res)
      if (res.code==200){
        // console.log("列表题目：",res)
        state.questionList = res.data.results
        scrollToTop()
      }else{
        ElMessage("获取题目失败")
        console.log("获取题目失败：",res)
      }
    })
    .catch((error)=>{
      console.log("获取目录题目错误：", error)
    })   
  } 

  //查看单个题目详情
  const viewDetail = (item)=>{
    state.question = item
    viewQuestionDetail.value.open(item)
  }
</script>
<style scoped>
html, body {
	width: 100%;
	height: 100%;
}
.showQuestion{
  display: flex;
  flex-direction: column;;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: flex-end;
  font-size: 12px;
  margin: 1;
  padding: 1;
}
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    margin: 0;
    padding: 0;
    height: 20px;
  }
  .card_content {
    display: flex;
    flex-flow: column wrap;
    margin: 0px;
    padding: 0px;
  }

  .box-card {
    display: flex;
    flex-flow: column wrap;
    align-items: stretch;
    height: auto;
    width: 100%;
    overflow-y: auto;
  }
  .line-break{
  white-space: pre-wrap;
  width: 950px;
  font-size: 12px;
  }
  img{
      display:block;
  }
  .questionsBody{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: stretch;
    overflow-y: auto;
    margin: 0;
    padding: 0;
  }
  .operateButton{
    padding: 0;
    margin: 0;
    display: flex;
    flex-flow: row nowrap;
  }
</style>